<template>
  <el-menu
    class="menu-container"
    mode="horizontal"
    background-color="#285fce"
    active-text-color="#ffd04b"
    text-color="#fff"
    :style="{
      border: 'none',
      paddingLeft: p + 'vw',
      paddingRight: p + 'vw',
    }"
  >
    <Dropdown :p="p" :click-handler="mainPageClick">首页</Dropdown>
    <Dropdown :p="p">政策中心</Dropdown>
    <Dropdown :info="info" :p="p">服务中心</Dropdown>
    <Dropdown :p="p">安全中心</Dropdown>
    <Dropdown :p="p">供需中心</Dropdown>
    <Dropdown :p="p">资源中心</Dropdown>
    <Dropdown :p="p">活动中心</Dropdown>
  </el-menu>
</template>

<script>
import Dropdown from "./Dropdown.vue";
// import countTo from "vue-count-to";
export default {
  components: {
    // countTo,
    Dropdown,
  },
  props: {
    p: {
      default: 6,
    },
  },
  methods: {
    mainPageClick() {
      location.hash = "/";
    },
  },
  data() {
    return {
      info: [
        {
          title: "企业上云",
          link: "",
          subTitles: [
            {
              title: "上云政策",
              link: "",
            },
            {
              title: "上云产品",
              link: "#/product",
            },
            {
              title: "服务提供商",
              link: "",
            },
          ],
        },
        {
          title: "标识解析",
          link: "",
          subTitles: [
            {
              title: "标识系统介绍",
              link: "",
            },
            {
              title: "标识解析介绍",
              link: "",
            },
            {
              title: "标识政策",
              link: "",
            },
            {
              title: "顶层设计",
              link: "",
            },
            {
              title: "典型案例",
              link: "",
            },
          ],
        },
        {
          title: "智能硬件",
          link: "",
          subTitles: [
            {
              title: "智慧消防一体机",
              link: "",
            },
          ],
        },
        {
          title: "线下服务",
          link: "",
          subTitles: [
          {
              title: "安全培训",
              link: "",
            },
            {
              title: "线下勘查服务",
              link: "",
            },
          ],
        },
        {
          title: "金融服务",
          link: "",
          subTitles: [
            {
              title: "融资产品",
              link: "",
            },
            {
              title: "融资需求",
              link: "",
            },
            {
              title: "金融动态",
              link: "",
            },
            {
              title: "合作机构",
              link: "",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss">
/* .vue-count-to-container {
    color: blue;
  } */
.menu-container {
  display: flex;
  height: 42px;
  position: relative;
  margin: 0;
}
</style>
